<template>
  <div>
    <a-input-group v-if="kind === 'material'" compact style="width:100%">
      <a-select placeholder="输入编码或名称" :dropdownMatchSelectWidth="false" showSearch :showArrow="false"
                v-model="names" optionFilterProp="children" :style="searchWidth"
                @search="handleSearch" @change="handleChange">
        <a-select-option v-for="item in materialData" :key="item.medicineNo">
          {{ item.medicineName }}({{item.medicineNo}})
        </a-select-option>
      </a-select>
      <a-button icon="search" @click="onSearch(mType)" />
    </a-input-group>

    <a-input-group v-if="kind === 'materialInput'" compact style="width:100%">
      <a-input-search  v-model="names" placeholder="输入编码"   @search="onSearch(mType)"></a-input-search>
    </a-input-group>

    <a-input-group v-if="kind === 'mt2'" compact style="width:100%">
      <a-select placeholder="输入编码或名称" :dropdownMatchSelectWidth="false" showSearch :showArrow="false"
                v-model="names" optionFilterProp="children" :style="searchWidth"
                @search="handleSearch" @change="handleChange">
        <a-select-option v-for="item in materialData" :key="item.id">
          {{ item.materialStr }}
        </a-select-option>
      </a-select>
      <a-button icon="search" @click="onSearch" />
    </a-input-group>


    <a-input-group v-if="kind === 'project'" compact style="width:100%">
      <a-select placeholder="输入项目编号" :dropdownMatchSelectWidth="false" showSearch :showArrow="false"
                v-model="names" optionFilterProp="children" :style="searchWidth"
                @search="handleSearch" @change="handleChange">
        <a-select-option v-for="item in materialData" :key="item.barCode">
          {{ item.materialStr }}
        </a-select-option>
      </a-select>
      <a-button icon="search" @click="onSearch" />
    </a-input-group>


    <j-select-material-modal v-if="kind === 'material'" ref="selectModal" :rows="rows" :multi="multi" :bar-code="value" @ok="selectOK" @initComp="initComp"/>

    <j-select-material-modal v-if="kind === 'materialInput'" ref="selectModal" :rows="rows" :multi="multi" :bar-code="value" @ok="selectOK" @initComp="initComp"/>

    <j-select-mt2-modal v-if="kind === 'mt2'" ref="selectModal" :rows="rows" :multi="multi" :bar-code="value" @ok="selectOK" @initComp="initComp"/>

    <a-input-search v-if="kind === 'batch'||kind === 'sn'||kind === 'snAdd'" v-model="names" placeholder="请点开弹窗" readOnly @search="onSearch"></a-input-search>




    <j-select-sn-modal v-if="kind === 'sn'" ref="selectModal" :rows="rows" :multi="multi" :bar-code="value" @ok="selectOK" @initComp="initComp"/>


    <j-select-project-modal v-if="kind === 'project'" ref="selectModal" :rows="rows" :multi="multi" :bar-code="value" @ok="selectOK" @initComp="initComp"/>

  </div>
</template>

<script>
  import JSelectMaterialModal from './modal/JSelectMaterialModal'
  import JSelectMt2Modal from './modal/JSelectMt2Modal'
  import JSelectSnModal from './modal/JSelectSnModal'
  import JSelectProjectModal from './modal/JSelectProjectModal'
  import { getMaterialByParam } from '@/api/api'

  export default {
    name: 'JSelectList',
    components: {JSelectMaterialModal,JSelectSnModal,JSelectMt2Modal,JSelectProjectModal},
    props: {
      value: {
        type: String,
        required: false
      },
      disabled: {
        type: Boolean,
        required: false,
        default: false
      },
      rows: {
        type: String,
        required: false
      },
      kind: {
        type: String,
        required: false
      },
      mType: {
        type: String,
        default: "",
        required: false
      },
      multi: {
        type: Boolean,
        default: true,
        required: false
      }
    },
    data() {
      return {
        ids: "",
        names: "",
        materialData: [],
        setTimeFlag: null,
        searchWidth: ""
      }
    },
    mounted() {
      this.ids = this.value
    },
    watch: {
      value(val) {
        this.ids = val
      }
    },
    created () {
      const currentWidth = window.screen.width
      if(currentWidth<1500) {
        this.searchWidth = 'width:75%'
      } else {
        this.searchWidth = 'width:81%'
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    methods: {
      initComp(name) {
        this.names = name ? name : undefined
      },
      onSearch(type) {
        this.$refs.selectModal.showModal("",type)
      },
      handleSearch(value) {
        let that = this
        if(this.setTimeFlag != null){
          clearTimeout(this.setTimeFlag);
        }
        this.setTimeFlag = setTimeout(()=>{
          getMaterialByParam({medicineNo: value}).then((res) => {
            if (res && res.success) {
                that.materialData = res.result
            }
          })
        },500)
      },
      handleChange(value) {
        this.$emit("change", value)
      },
      selectOK(rows, idstr) {
        console.log("选中id", idstr)
        if (!rows) {
          this.ids = ''
        } else {
          this.ids = idstr
        }
        this.$emit("change", this.ids)
      }
    }
  }
</script>

<style scoped>

</style>